var images = {};
// Add in prepareCanvas Function
loadImage("torso");
loadImage("zombie-hair");
loadImage("zombie-head");
loadImage("zombie-leftArm");
loadImage("zombie-legs");
loadImage("zombie-rightArm");


var totalResources = 6;
var numResourcesLoaded = 0;
var fps = 30;


var charX = 245;
var charY = 185;

var breathInc = 0.1;
var breathDir = 1;
var breathAmt = 0;
var breathMax = 2;
var breathInterval = setInterval(updateBreath, 1000 / fps);

var maxEyeHeight = 14;
var curEyeHeight = maxEyeHeight;
var eyeOpenTime = 0;
var timeBtwBlinks = 4000;
var blinkUpdateTime = 200;
var blinkTimer = setInterval(updateBlink, blinkUpdateTime);


function prepareCanvas(canvasDiv, canvasWidth, canvasHeight) {
	// Create the canvas (Neccessary for IE because it doesn't know what a canvas element is)
	canvas = document.createElement('canvas');
	canvas.setAttribute('width', canvasWidth);
	canvas.setAttribute('height', canvasHeight);
	canvas.setAttribute('id', 'canvas');
	canvasDiv.appendChild(canvas);
	if ( typeof G_vmlCanvasManager != 'undefined') {
		canvas = G_vmlCanvasManager.initElement(canvas);
	}
	context = document.getElementById('canvas').getContext("2d");
	//loadImage here
}

function loadImage(name) {
	images[name] = new Image();
	images[name].onload = function() {
		resourceLoaded();
	};
	images[name].src = "images/" + name + ".png";
}

function resourceLoaded() {
	numResourcesLoaded += 1;
	if (numResourcesLoaded === totalResources) {
		setInterval(redraw, 1000 / fps);
		
			
		
		
	}
}

function redraw() {
	var x = charX;
	var y = charY;
	canvas.width = canvas.width;
	drawEllipse(x + 40, y + 29, 160 - breathAmt, 6); // Shadow
context.drawImage(images["zombie-leftArm"], x + 40, y - 42 - breathAmt);
context.drawImage(images["zombie-legs"], x, y);
context.drawImage(images["torso"], x, y - 50);
context.drawImage(images["zombie-head"], x - 10, y - 125 - breathAmt);
context.drawImage(images["zombie-hair"], x - 37, y - 138 - breathAmt);
context.drawImage(images["zombie-rightArm"], x - 15, y - 42 - breathAmt);

drawEllipse(x + 47, y - 68 - breathAmt, 8, curEyeHeight);
drawEllipse(x + 58, y - 68 - breathAmt, 8, curEyeHeight);

}

function drawEllipse(centerX, centerY, width, height) {
context.beginPath();
context.moveTo(centerX, centerY - height/2);
context.bezierCurveTo(
centerX + width/2, centerY - height/2,
centerX + width/2, centerY + height/2,
centerX, centerY + height/2
);
context.bezierCurveTo(
centerX - width/2,
centerY + height/2,
centerX - width/2,
centerY - height/2, centerX, centerY - height/2
);
context.fillStyle = "black";
context.fill(); context.closePath();
}

function updateBreath() {
if (breathDir === 1) { // breath in
breathAmt -= breathInc;
if (breathAmt < -breathMax) {
breathDir = -1;
}
} else { // breath out
breathAmt += breathInc;
if(breathAmt > breathMax) {
breathDir = 1;
}
}
}

function updateBlink() {
eyeOpenTime += blinkUpdateTime;
if(eyeOpenTime >= timeBtwBlinks){
blink();
}
}
function blink() {
curEyeHeight -= 1;
if (curEyeHeight <= 0) {
eyeOpenTime = 0; curEyeHeight = maxEyeHeight;
} else {
setTimeout(blink, 10);
}
}